extends common/layout
block content
    link(rel='stylesheet' type='text/css' href='../css/shop.min.css')
    link(rel='stylesheet' type='text/css' href='../css/classify-product.min.css')
    include common/head
    div.seller-center-container.shop-container
        include common/nav
        div.seller-content.clearfix
            div.selling-right-wrap
                div.router 店铺管理>宝贝分类管理
                div.choose.clearfix
                    ul
                        li.data-classify.active 分类管理
                        li.data-product 宝贝管理
                div.all-classify
                    div.main-top.clearfix
                        div.check-box
                            input(type="checkbox" name='select-allbox')
                            span 全选
                        i.iconfont.icon-delete2
                        a.btn-text 批量删除
                        a.btn-orange 保存
                    div.main-center.clearfix
                        div.head.clearfix
                            ul
                                li 分类名称
                                li.time 创建时间
                                li.handel 操作
                    div.main-inner.clearfix
                        ul.domtree.clearfix
                            li
                                input(type="checkbox" name='all-box').check
                                div(style={'display': 'inline-block'})
                                    i.icon.icon-arrow-black-up
                                    input(type="text").dom-input.first-input

                                span.first-span

                                    | 2018-05-25

                                a.text-btn  删除
                                a.text-btn  查看
                                ul.domtree-level
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看

                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        i.iconfont.icon-addclass
                                        button.add-btn 添加子分类

                            li

                                input(type="checkbox" name='all-box').check
                                div(style={'display':'inline-block'})
                                    i.icon.icon-arrow-black-up
                                    input(type="text").dom-input.first-input

                                span.first-span

                                    |2018-05-25

                                a.text-btn  删除
                                a.text-btn  查看
                                ul.domtree-level
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看

                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        i.iconfont.icon-addclass
                                        button.add-btn 添加子分类

                            li

                                input(type="checkbox" name='all-box').check
                                div(style={'display':'inline-block'})
                                    i.icon.icon-arrow-black-up
                                    input(type="text").dom-input.first-input

                                span.first-span

                                    |2018-05-25

                                a.text-btn  删除
                                a.text-btn  查看
                                ul.domtree-level
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看

                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        input(type="checkbox").check
                                        input(type="text").dom-input
                                        span 2018-05-25
                                        a.text-btn  删除
                                        a.text-btn  查看
                                    li
                                        i.iconfont.icon-addclass
                                        button.add-btn 添加子分类


                div.all-product.clearfix.hidden
                    div.product-right
                        div.all-classify 全部宝贝
                        div.not-classify 未分类宝贝
                        div.classify-title.active-style 已分类宝贝
                            i.icon.icon-arrow-black-up
                        ul.data-level
                            li
                                span.level-click 一级分类
                                i.icon.icon-arrow-black-up
                                ul.level-2
                                    li.active-style 二级分类

                                    li 二级分类


                            li
                                span.level-click  一级分类
                                i.icon.icon-arrow-black-up
                                ul.level-2
                                    li 二级分类
                                    li.active-style 二级分类

                    div.product-left
                        div.product-main.clearfix
                            div.product-top.clearfix
                                ul.clearfix
                                    li 宝贝名称
                                    li.price 价格
                                    li.classify 所属分类
                                    li.classify 编辑分类
                                    li.classify 创建时间
                                    li.ml-30 状态
                                    li.db-50 操作
                            div.product-center
                               div.center-detail.clearfix
                                   div.width-80
                                       img(src="../image/code.png")
                                   div.product-name 名字
                                   div  ￥100
                                   div  一级分类>二级分类
                                   div.select-model
                                       input(type="text" value="请选择分类" readonly).read-only
                                       i.icon.icon-arrow-black-up.data-icon
                                       div.select-box
                                           p 一级分类一级分类一级分类一级分类一级分类一级分类
                                           ul
                                               li
                                                    input(type="checkbox")
                                                    span 二级分类二级分类二级分类二级分类二级分类二级分类二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                           p 一级分类
                                           ul
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                           p 一级分类
                                               ul
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                   div  2018-08-08
                                   div  出售中
                                   div
                                       a.text-btn 编辑
                                       a.text-btn 下架


                               div.center-detail.clearfix
                                   div.width-80
                                       img(src="../image/code.png")
                                   div.product-name 名字
                                   div  ￥100
                                   div  一级分类>二级分类
                                   div.select-model
                                       input(type="text" value="请选择分类" readonly).read-only
                                       i.icon.icon-arrow-black-up.data-icon
                                       div.select-box
                                           p 一级分类一级分类一级分类一级分类一级分类一级分类
                                           ul
                                               li
                                                    input(type="checkbox")
                                                    span 二级分类二级分类二级分类二级分类二级分类二级分类二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                           p 一级分类
                                           ul
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                               li
                                                   input(type="checkbox")
                                                   span 二级分类
                                           p 一级分类
                                               ul
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                                   li
                                                       input(type="checkbox")
                                                       span 二级分类
                                   div  2018-08-08
                                   div  出售中
                                   div
                                       a.text-btn 编辑
                                       a.text-btn 下架


                        div.pages-container
                            ul.pagination
                                li.disabled
                                    a(href="#") <
                                li
                                    a(href="#") 1
                                li.active
                                    a(href="#") 2
                                li
                                    a(href="#") 3
                                li
                                    a(href="#") 4
                                li
                                    a(href="#") ...
                                li
                                    a(href="#") 17
                                li
                                    a(href="#") >
        script.

            $(function(){
                //层级全选
                $("input[name='all-box']").click(select)
                //最高级全选
                $("input[name='select-allbox").click(select)
                //展开与收缩
                $('.icon-arrow-black-up').click(function(){
                    console.log(this)
                    if($(this).hasClass('icon-arrow-black-up')){
                        $(this).removeClass('icon-arrow-black-up').addClass('icon-arrow-black-down')
                        var nodeTree=$(this).siblings('ul')
                        var parents = $(this).parent().parent()[0]
                        $(nodeTree).addClass('hidden')
                        $(parents).addClass('dd')
                        console.log(nodeTree,parents)


                    }else{
                        var nodeTree = $(this).siblings('ul')
                        var parents = $(this).parent().parent()[0]
                        console.log(nodeTree, parents)
                        $(nodeTree).removeClass('hidden')
                        $(parents).removeClass('dd')
                        $(this).removeClass('icon-arrow-black-down').addClass('icon-arrow-black-up')
                    }

                })
                //宝贝管理 收缩展开
                $('.level-click ').click(function(){

                    var levelIcon=$(this).siblings('i')[0]
                    var levelUl=$(this).siblings('ul')[0]
                    if($(levelIcon).hasClass('icon-arrow-black-up')){
                        $(levelIcon).removeClass('icon-arrow-black-up').addClass('icon-arrow-black-down')
                        $(levelUl).addClass('hidden')
                    }else{
                        $(levelIcon).removeClass('icon-arrow-black-down').addClass('icon-arrow-black-up')
                        $(levelUl).removeClass('hidden')
                    }
                    // $(levelIcon).addClass()
                    // console.log()
                })
                //已分类宝贝
                $('.classify-title').click(function () {
                    $('.data-level').toggle();
                    var levelIcon = $(this).children('i')[0]
                    if ($(levelIcon).hasClass('icon-arrow-black-up')) {
                        $(levelIcon).removeClass('icon-arrow-black-up').addClass('icon-arrow-black-down')

                    } else {
                        $(levelIcon).removeClass('icon-arrow-black-down').addClass('icon-arrow-black-up')
                    }
                    console.log(levelIcon)
                })
                //新增子分类
                $('.add-btn').click(function(){
                    $(this).parent().before("<li><input type='checkbox' class='check'><input class='dom-input' type='text'><span>2018-05-05</span><a class='btn-text'>删除</a><a class='btn-text'>查看</a></li>")
                 console.log($(this).parent().parent())
                })
                $('.data-classify').click(function () {
                   $(this).addClass('active').siblings().removeClass()
                   $('.all-classify').removeClass('hidden').siblings('.all-product').addClass('hidden');
                })
                $('.data-product').click(function(){
                    $(this).addClass('active').siblings().removeClass()
                    $('.all-product').removeClass('hidden').siblings('.all-classify').addClass('hidden')
                })
            })
               //
                $('.read-only').click(function (event) {
                    event.stopPropagation();
                    var selectBox=$(this).siblings('div')[0]
                    console.log($(this).siblings('div')[0])
                    $(selectBox).toggle()
                })
                $('.select-box').mouseover(function(){
                    $(this).css('display','block')
                })
                $('.select-box').mouseleave(function () {
                    $(this).css('display', 'none')
                })

